$(function () {
    getData();

    $('#refresh-button').click(function () {
        getData();
    });

    $('#submit-button').click(function () {
        saveData();
    });

    $('.btn-group .add-button').click(function () {
        showInputBox($(this), false);
    });

    $('.btn-group .edit-button').click(function () {
        showInputBox($(this), true);
    });

    $('.btn-group .delete-button').click(function () {
        var $button = $(this);
        var $inputBox = $button.closest('.form-group').find('.input-box');
        var $listGroup = $button.closest('.form-group').find('.data-list-group');
        var $listItem = $listGroup.find('.list-group-item.active');
        if ($inputBox.hasClass('show')) {
            $inputBox.collapse('hide');
        }
        if ($listItem.length === 0) {
            window.showInformationAlert(0, '请选择要删除的列表项。');
        } else {
            $listItem.remove();
            saveOptions($listGroup, null);
        }
    });

    $('.input-box .btn').click(function () {
        var $button = $(this);
        var value = $.trim($button.closest('.input-group').find('.form-control').val());
        if (!value) {
            window.showInformationAlert(0, '列表项不能为空。');
            return;
        }

        var values = [];
        var $listGroup = $button.closest('.form-group').find('.data-list-group');
        $.each($listGroup.find('.list-group-item'), function (index, item) {
            if (!$(item).hasClass('active')) values.push($(item).text());
        });
        if (values.indexOf(value) >= 0) {
            window.showInformationAlert(0, '相同的列表项已存在。');
            return;
        }

        var $inputBox = $button.closest('.form-group').find('.input-box');
        $inputBox.collapse('hide');
        saveOptions($listGroup, value);
    });

    $('.data-list-group').on('click', '.list-group-item', function () {
        var $item = $(this);
        var $listGroup = $item.parent();
        var $inputBox = $listGroup.closest('.form-group').find('.input-box');
        if ($inputBox.hasClass('show') && !$item.hasClass('active')) return;

        $listGroup.find('.list-group-item').removeClass('active');
        $item.addClass('active');
        $inputBox.find('.form-control').val($item.text());
    });

    function getData() {
        window.showLoadingBox('数据加载中...');
        $.get('/api/config', null, function (data) {
            window.hideLoadingBox(function () {
                if (data.code === 200) {
                    showData(data.data);
                } else {
                    window.showInformationAlert(3, data.message);
                }
            });
        });
    }

    function saveData() {
        var requestData = readFormData($('#data-form'), true);
        window.showLoadingBox('提交数据...');
        $.post('/api/config', requestData, function (data) {
            window.hideLoadingBox(function () {
                if (data.code === 200) {
                    showData(data.data);
                    window.showInformationAlert(0, '数据保存成功。');
                } else {
                    window.showInformationAlert(3, data.message);
                }
            });
        });
    }

    function showData(data) {
        var $input = $('#data-form').find('[name="defaultRemark"]');
        $input.val($.trim(data.defaultRemark));
        showDataList(data, 'vehicleTypes');
        showDataList(data, 'vehicleNatures');
        showDataList(data, 'powerTypes');
        $('#data-form').find('.input-box').collapse('hide');
    }

    function showDataList(data, field) {
        var text = $.trim(data[field]);
        var list = text ? text.split(',') : [];
        var html = template('list-group-template', {list: list});
        var $input = $('#data-form').find('[name="' + field + '"]');
        var $listGroup = $input.closest('.form-group').find('.list-group');
        $input.val(text);
        $listGroup.empty();
        $listGroup.append(html);
    }

    function saveOptions($listGroup, value) {
        var values = [];
        var $listItem = $listGroup.find('.list-group-item.active');
        if (value) {
            if ($listItem.length > 0) {
                $listItem.text(value);
            } else {
                $listItem = $('<div class="list-group-item"></div>');
                $listItem.addClass('active');
                $listItem.text(value);
                $listGroup.find('.list-group-footer').before($listItem);
                var scrollTop = $listItem.offset().top + $listGroup[0].scrollTop;
                $listGroup.animate({scrollTop: scrollTop}, 500);
            }
        }
        $.each($listGroup.find('.list-group-item'), function (index, item) {
            values.push($(item).text());
        });
        $listGroup.find('.list-group-footer').text('共' + values.length + '项');
        $listGroup.closest('.form-group').find('input[type="hidden"]').val(values.join(','));
    }

    function showInputBox($button, edit) {
        var $inputBox = $button.closest('.form-group').find('.input-box');
        var $listGroup = $button.closest('.form-group').find('.data-list-group');
        if ($inputBox.hasClass('show')) {
            $inputBox.collapse('hide');
            return;
        }

        if (!edit) {
            $inputBox.find('.form-control').val('');
            $inputBox.collapse('show');
            $listGroup.find('.list-group-item.active').removeClass('active');
            window.setFocusTo($inputBox.find('.form-control'), 50);
            return;
        }

        var $listItem = $listGroup.find('.list-group-item.active');
        if ($listItem.length === 0) {
            window.showInformationAlert(0, '请选择要编辑的列表项。');
            return;
        }

        $inputBox.find('.form-control').val($listItem.text());
        $inputBox.collapse('show');
        window.setFocusTo($inputBox.find('.form-control'), 50);
    }
});
